<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
</style>
<html lang="zh-CN">
<head>
    <title>支付宝 知托付!</title>
    <meta charset="UTF-8">
    <link rel="icon" href="../resource/images/icons/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../resource/bootstrap/css/bootstrap.min.css">
    <script src="../resource/bootstrap/js/jquery.min.js"></script>
    <script src="../resource/bootstrap/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
        <c:choose>
            <c:when test="${not empty sessionScope.user}">
                <a class="center-block btn btn-info login-btn" href='<c:url value="/person/i.jsp" />'>我是个人用户</a>
            </c:when>
            <c:otherwise>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
                    我是个人用户
                </button>
            </c:otherwise>
        </c:choose>
        <!-- Modal -->
        <div class="modal fade in bs-example-modal-sm" id="loginModal" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div><!-- /.modal-header -->
                    <div class="modal-body">
                        <span class="bg-danger center-block text-center">
                            <strong>${requestScope.msg}${errors.account}${errors.password}</strong>
                        </span>
                        <div class="row">
                            <div class="col-md-4">
                                <!-- 用户名输入框组 -->
                                <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-user"></span>
                            </span>
                                    <input id="account" type="text" class="form-control" name="account"
                                           placeholder="账户名" data-placement="top" data-content="请输入账户名"
                                           value="${requestScope.form.account}" />
                                </div>
                            </div>
                        </div><!-- /.row -->
                        <div class="row">
                            <div class="col-md-4">
                                <!-- 密码输入框 -->
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input id="password" class="form-control" type="password" name="password"
                                           data-placement="bottom" data-content="请输入密码"/>
                                </div>
                            </div>
                        </div><!--/.row-->
                        <!-- 登录 -->
                        <div class="row">
                            <div class="col-md-4">
                            <span class="center-block">
                                <button id="login" class="btn btn-info" style="letter-spacing: 2px">登 录</button>
                            </span>
                            </div>
                        </div><!-- /.row -->
                    </div><!-- /.modal-body -->
                    <div class="modal-footer">
                        <a role="button" type="button" class="btn btn-primary" href='<c:url value="/user/register.jsp" /> '>立即注册</a>
                    </div><!-- /.nodal-footer -->
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

</body>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover();
        $('#login').on('click',function () {
            if (checkForm()){
                login();
            }
        });
    })

    // 格式检查
    function checkForm() {
        var flag = false;
        var userName= $("#account").val();
        var password = $('#password').val();
        if (userName == null || userName ==''){
            $("#account").popover('show');
            setTimeOut();
        } else if(userName.length !=11){
            $("#account").attr('data-content','账户格式错误')
            $("#account").popover('show');
            setTimeOut();
        } else if(password == ''){
            $("#password").popover('show');
            setTimeOut();
        } else {
            flag = true;
        }

        return flag;
    }

    //延时器
    function setTimeOut() {
        setTimeout(function () {
            $("#account").popover('hide');
            $("#password").popover('hide');
        }, 2000);
    }

    function login(){
        $.ajax({
            url:'<c:out value="login.do" />',
            type:'POST',
            async:true,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data:{
                account:$("#account").val(),
                password:$('#password').val(),
            },
            timeout:3000,
            dataType:'text',
            success:function(data,textStatus){
                console.log(data);
                console.log(textStatus);
            },
            error:function(XmlHttpRequest,textStatus,errorThrown) {
                console.log(XmlHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
</script>
</html>
